<template>
    <div>
        <Card title="新增属性值" :bordered="false" dis-hover class="ivu-mt qw-form-card">
            <div style="width:60%;margin: 0 auto;padding: 20px;">
                <Form :model="formLeft" label-position="right" :label-width="100">
                    <!-- <FormItem label="值">
            <Input v-model="formLeft.input1"></Input>
          </FormItem> -->
                    <!-- <FormItem label="非展示值">
            <Input v-model="formLeft.input2"></Input>
          </FormItem>-->
                    <FormItem label="所属分类">
                        <Select v-model="model1" style="width:200px">
                            <Option v-for="item in cityList" :value="item.uuid" :key="item.uuid">{{ item.categoryName}}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="自定义" v-if="model1==='storeSpec'">
                        <Input maxlength="50" show-word-limit v-model="formLeft.storeSpec"></Input>
                    </FormItem>
                    <FormItem label="颜色属性" v-if="model1==='color'">
                        <Input maxlength="50" show-word-limit v-model="formLeft.color"></Input>
                    </FormItem>
                    <FormItem label="星期" v-if="model1==='week'">
                        <Select v-model="model2" style="width:200px">
                            <Option v-for="item in weekList" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="时间" v-if="model1==='time'">
                        <Col span="12">
                        <TimePicker v-model="model3" confirm type="timerange" placement="bottom-end"
                            placeholder="Select time" style="width: 168px"></TimePicker>
                        </Col>
                    </FormItem>
                    <FormItem label="自定义"
                        v-if="model1!=='time'&&model1!=='color'&&model1!=='storeSpec'&&model1!=='week'&&model1!==''">
                        <Input maxlength="50" show-word-limit v-model="formLeft.storeSpec"></Input>
                    </FormItem>
                   <!-- <FormItem label="属性图片" v-if="model1!=='time'&&model1!=='color'&&model1!=='storeSpec'&&model1!=='week'&&model1!==''">
                        <Upload name="img" :maxSize="10240" :defaultList="formLeft.valueImageKey" :maxLen="1"
                            :format="['jpg','jpeg','png']" @handleChangeImage="changeSubscriptImg">
                        </Upload>
                    </FormItem>-->
                    <FormItem label="">
                        <Button type="primary" :loading="sLoading" @click="handleSubmit('formData')">提交</Button>
                        <Button style="margin-left: 8px" @click="cancel">取消</Button>
                    </FormItem>
                </Form>
            </div>
        </Card>
    </div>
</template>
<script>
    import { ApiRequest } from '@api/basePage';
    import Upload from '@/components/common/upload'; // 上传组件
    export default {
        components: { Upload },
        data() {
            return {
                formLeft: {
                    storeSpec: '',
                    color: '',
                    input3: '',
                    desc: '',
                  valueImageKey:''
                },
                weekList: [
                    {
                        value: '星期一',
                        label: '星期一'
                    },
                    {
                        value: '星期二',
                        label: '星期二'
                    },
                    {
                        value: '星期三',
                        label: '星期三'
                    },
                    {
                        value: '星期四',
                        label: '星期四'
                    },
                    {
                        value: '星期五',
                        label: '星期五'
                    },
                    {
                        value: '星期六',
                        label: '星期六'
                    },
                    {
                        value: '星期日',
                        label: '星期日'
                    }

                ],
                cityList: [],
                model1: '',
                model2: '',
                model3: '',
                sLoading: false
            }
        },
        created() {
            this.getData()
        },
        mounted() {
        },
        methods: {
            // 取消
            cancel() {
                this.$router.go(-1)
            },
            // 获取分类
            getData() {
                let data = {}
                ApiRequest('/sysback/template/producttemplateattrvaluecategory/getAllAttrValueCategory', 'post', data).then(res => {
                    this.cityList = res.retData
                })
            },
            // 商品名称角标
            changeSubscriptImg(imgArr) {
                this.formLeft.valueImageKey = imgArr;
            },
            // 提交
            handleSubmit(name) {
                // this.$refs[name].validate((valid) => {
                // if (valid) {
                let data = {}
                if (this.model1 === 'storeSpec') {
                    if (this.formLeft.storeSpec !== '') {
                        data.value = this.formLeft.storeSpec
                        data.categoryUuid = 'storeSpec'
                    } else {
                        this.$Message.error('请填写自定义内容');
                        return;
                    }
                } else if (this.model1 === 'color') {
                    if (this.formLeft.color !== '') {
                        data.value = this.formLeft.color
                        data.categoryUuid = 'color'
                    } else {
                        this.$Message.error('请填写颜色属性');
                        return;
                    }
                } else if (this.model1 === 'week') {
                    if (this.model2 !== '') {
                        data.value = this.model2
                        data.categoryUuid = 'week'
                    } else {
                        this.$Message.error('请选择星期');
                        return;
                    }
                } else if (this.model1 === 'time') {
                    if (this.model3[0] !== '' && this.model3[1] !== '') {
                        data.categoryUuid = 'time'
                        data.value = this.model3[0] + '-' + this.model3[1]
                    } else {
                        this.$Message.error('请选择时间');
                        return;
                    }
                } else {
                    if (this.formLeft.storeSpec !== '') {
                        data.value = this.formLeft.storeSpec
                        data.categoryUuid = this.model1
                    } else {
                        this.$Message.error('请填写自定义内容');
                        return;
                    }
                }

                if (this.sLoading) {
                    return false;
                }
                this.sLoading = true;
                // 保存新增属性值
                ApiRequest('/sysback/template/producttemplateattrvalue/createAttrValue', 'post', data).then(res => {
                    if (res.retStatus === '1') {
                        this.$Message.success('成功!');
                        this.$router.go(-1)
                    }
                    this.sLoading = false;
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .img {
        width: 88px;
        height: 88px;
        border: 1px solid #999999;
    }
</style>
